<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen v-model="showDialog" title="" :btnList="fullInfo.btnList">
        <div class="model-panel">
          <div class="model-panel-body">
            <NewPageFilter
              v-model:query="filterInfo.query"
              :filter-btn="filterInfo.list"
            >
              <template v-slot:filter-remove>
                <el-button
                  :disabled="!tableInfo.selections.length"
                  @click="remove"
                  >删除</el-button
                >
              </template>
            </NewPageFilter>
            <div class="flex_full_item">
              <el-form :model="tableInfo" ref="tableForm" style="width: 100%">
                <!-- 表格 -->
                <PageTable
                  :refresh="tableInfo.refresh"
                  :init-curpage="tableInfo.initCurpage"
                  v-model:data="tableInfo.data"
                  :pager="false"
                  :summary="true"
                  :check-box="true"
                  :tab-index="true"
                  :summary-field-list="tableInfo.summaryFieldList"
                  :field-list="tableInfo.fieldList"
                  :handle="tableInfo.handle"
                  @handleEvent="handleEvent"
                >
                  <template #col-fieldName="scope">
                    <el-form-item
                      v-if="scope.$index >= 0"
                      style="width: 100%"
                      :prop="'data.' + scope.$index + '.fieldName'"
                      :rules="[
                        {
                          required: scope.$index >= 0,
                          message: '请选择变更字段',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="scope.row.fieldName"
                        type="input"
                        :maxlength="50"
                        :disabled="true"
                        class="not-mongolia"
                        placeholder="请选择变更字段"
                      >
                        <template #append>
                          <el-icon @click="open(scope.$index)">
                            <MoreFilled />
                          </el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </template>
                  <template #col-adjustType="scope">
                    <el-form-item
                      v-if="scope.$index >= 0"
                      style="width: 100%"
                      :prop="'data.' + scope.$index + '.adjustType'"
                      :rules="[
                        {
                          required: scope.$index >= 0,
                          message: '请选择变更属性',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <SelectModel
                        v-model:modelValue.trim="scope.row.adjustType"
                        typeCode="customize_adjust_type"
                      />
                    </el-form-item>
                  </template>
                  <template #col-value="scope">
                    <el-form-item
                      v-if="scope.$index >= 0"
                      :prop="'data.' + scope.$index + '.value'"
                      style="width: 100%"
                      :rules="[
                        {
                          required: scope.$index >= 0,
                          message: '请输入变更值',
                          trigger: ['blur', 'change'],
                        },
                      ]"
                    >
                      <el-input
                        v-if="scope.row.adjustType === '1'"
                        v-model="scope.row.value"
                        type="text"
                        placeholder="请输入变更值"
                      >
                      </el-input>
                      <el-input-number
                        v-else
                        style="width: 100%"
                        v-model.lazy="scope.row.value"
                        clearable
                        controls-position="right"
                        :min="-2"
                        :max="
                          scope.row.adjustType === '3'
                            ? 2
                            : 9999999999999999999999
                        "
                        placeholder="请输入变更值"
                      />
                    </el-form-item>
                  </template>
                </PageTable>
              </el-form>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>

    <SelectField
      v-if="selectFieldInfo.visible"
      v-model:showDialog="selectFieldInfo.visible"
      v-model:query="selectFieldInfo.query"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @reset="reset"
      @callback="selectFieldCallBack"
    />
  </div>
</template>

<script setup name="customizeAdjustModify">
import { adjustAllFieldCustomize } from '@/api/customize.js'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: () => {
      return ''
    },
  },
  id: {
    type: String,
    default: () => {
      return 0
    },
  },
})
const filterInfo = ref({
  list: [
    {
      type: 'button',
      label: '添加行',
      value: 'add',
      event: add,
    },
    {
      type: 'slot',
      value: 'remove',
    },
  ],
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '变更字段',
      value: 'fieldName',
      type: 'slot',
    },
    {
      label: '展示名',
      value: 'label',
      // type: "slot",
    },
    {
      label: '变更属性',
      value: 'adjustType',
      type: 'slot',
    },
    {
      label: '变更值',
      value: 'value',
      type: 'slot',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '150',
    btList: [
      {
        label: '添加下一行',
        event: add,
        show: true,
      },
      {
        label: '删除',
        event: remove,
        show: true,
      },
    ],
  },
})
const selectFieldInfo = ref({
  visible: false,
  saveEmpty: true,
  query: {},
})
const listTypeInfo = ref({
  licenseList: [],
  brandList: [],
  unitList: [],
})
const options = ref([])
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})
const selectIndex = ref('')

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件visible
  },
})

function remove(data = undefined) {
  if (tableInfo.value.selections.length > 0) {
    tableInfo.value.data = tableInfo.value.data.filter(
      (row) => !tableInfo.value.selections.includes(row)
    )
  } else if (data) {
    tableInfo.value.data = tableInfo.value.data.filter((row) => data !== row)
  }
}
function add() {
  let obj = {
    fieldName: '',
    adjustType: '',
  }
  tableInfo.value.data.push(obj)
}
function open(index) {
  selectIndex.value = index
  selectFieldInfo.value.visible = true
}
function reset() {
  selectFieldInfo.value.visible = false
}
function selectFieldCallBack(row) {
  if (row) {
    tableInfo.value.data[selectIndex.value]['fieldName'] = row.fieldName
    tableInfo.value.data[selectIndex.value]['label'] = row.label
  } else {
    tableInfo.value.data[selectIndex.value]['fieldName'] = ''
    tableInfo.value.data[selectIndex.value]['label'] = ''
  }
}

function save() {
  proxy.$refs['tableForm'].validate((valid, obj) => {
    console.log(valid, obj)
    if (valid) {
      adjustAllFieldCustomize(tableInfo.value.data)
        .then((res) => {
          if (res.success) {
            showDialog.value = false
            emits('returnModify', false)
          }
        })
        .catch(() => {})
    }
  })
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}

onMounted(() => {
  let obj = {
    fieldName: '',
    adjustType: '',
  }
  tableInfo.value.data.push(obj)
})
</script>

<style scoped></style>
